<template>
  <div class="app-container">
    <Breadcrumb style="margin-bottom: 20px" />
    <div class="vmi-container app-container">
      <!-- 条件查询表单 -->
      <div class="search-wrap">
        <a-form :model="form" auto-label-width ref="paramsRef">
          <a-row :gutter="16">
            <a-col :span="8" v-if="form.status == 1">
              <a-form-item field="makeType" label="是否自产">
                <a-select v-model="form.makeType" placeholder="请选择" style="background-color: white">
                  <a-option :value="1">是</a-option>
                  <a-option :value="0">否</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8" v-if="form.status == 0">
              <a-form-item field="time" label="建档日期">
                <a-range-picker v-model="tempTime" style="background-color: white" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="providerType" label="自有供应商">
                <a-select v-model="form.providerType" placeholder="请选择" style="background-color: white">
                  <a-option :value="1">是</a-option>
                  <a-option :value="0">否</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="areaId" label="所在区域选择">
                <a-cascader
                  v-model="form.areaId"
                  :field-names="{ value: 'id', label: 'name' }"
                  :options="areaOption"
                  placeholder="请选择"
                  style="background-color: white"
                />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <div class="btn-wrap">
                <a-button type="primary" @click="getList">
                  <template #icon>
                    <icon-search />
                  </template>
                  <template #default>查询</template>
                </a-button>
                <a-button type="outline" class="ml16" @click="reset" style="background-color: white;">
                  <template #icon>
                    <icon-refresh />
                  </template>
                  <template #default>重置</template>
                </a-button>
              </div>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="sticky">
        <a-tabs v-model:active-key="form.status" @change="getList">
          <a-tab-pane :key="1" title="正常"> </a-tab-pane>
          <a-tab-pane :key="0" title="禁用"> </a-tab-pane>
        </a-tabs>
        <div class="operate-btn">
          <a-space>
            <a-button type="outline" @click="router.push('/business/vmi/add')">添加自有供应商</a-button>
            <a-button type="outline" @click="toPath">添加平台供应商</a-button>
            <a-button type="outline" v-if="form.status == 0">批量导入</a-button>
          </a-space>
          <a-input placeholder="输入供应商名称，可以快速搜索" style="width: 300px" v-model="form.factoryName" @blur="getList">
            <template #prefix>
              <icon-search />
            </template>
          </a-input>
        </div>
      </div>
      <a-table :data="data" :pagination="false">
        <template #columns>
          <a-table-column title="企业名称" ellipsis tooltip data-index="anotherName"></a-table-column>
          <a-table-column title="公司地址" ellipsis tooltip data-index="address"></a-table-column>
          <a-table-column title="法人代表" ellipsis tooltip data-index="bossName" :width="100"></a-table-column>
          <a-table-column title="建档时间" data-index="createTime"></a-table-column>
          <a-table-column title="联系电话" data-index="moblie"></a-table-column>
          <a-table-column title="开票信息" data-index="moblie" :width="260">
            <template #cell="{ record }">
              <p v-if="record.isSupportBilling === 1">
                支持开票：专票{{ record.specialTicket }}%、普票{{ record.ordinaryTicket }}%
              </p>
              <p v-else>不支持开票</p>
            </template>
          </a-table-column>
          <a-table-column title="关联商品数" data-index="productNum" :width="100">
            <template #cell="{ record }">
              <a-button type="text">{{ record.productNum }}</a-button>
            </template>
          </a-table-column>
          <a-table-column title="状态" :width="100">
            <template #cell="{ record }">
              <a-switch v-model="record.status" @change="editStatus(record)" :unchecked-value="0" :checked-value="1" />
            </template>
          </a-table-column>
          <a-table-column title="操作">
            <template #cell="{ record }">
              <div style="display: flex">
                <a-button
                  type="text"
                  size="mini"
                  v-if="record.typeCode == 3"
                  @click="router.push({ path: '/business/vmi/edit', query: { factoryId: record.factoryId } })"
                  >编辑</a-button
                >
                <a-button type="text" size="mini" @click="view(record.factoryId)">查看</a-button>
                <a-button type="text" size="mini" v-if="form.status == 0">删除</a-button>
              </div>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <div class="pagination">
        <a-pagination
          :total="total"
          v-model:page-size="params.size"
          v-model:current="params.current"
          show-total
          show-jumper
          show-page-size
          @change="getList"
          @page-size-change="getList"
        />
      </div>
    </div>
    <a-modal v-model:visible="visible" title-align="start" :footer="false">
      <template #title>
        <CustomTitle title="供应商资料信息" />
      </template>
      <div class="list">
        <div class="line">
          <span>供应商企业名称：</span>
          <span>{{ detail.anotherName }}</span>
        </div>
        <div class="line">
          <span>供应商企业地址：</span>
          <span>{{ detail.address }}</span>
        </div>
        <div class="line">
          <span>企业纳税号：</span>
          <span>{{}}</span>
        </div>
        <div class="line">
          <span>法定代表人：</span>
          <span>{{ detail.bossName }}</span>
        </div>
        <div class="line">
          <span>成立时间：</span>
          <span>{{ detail.orgCreatDate }}</span>
        </div>
        <div class="line">
          <span>联系电话：</span>
          <span>{{ detail.moblie }}</span>
        </div>
        <div class="line">
          <span>关联商品：</span>
          <span>{{ detail.productNum }}</span>
        </div>
        <div class="line">
          <span>经营品牌：</span>
          <div class="img-list"><img v-for="item in detail.brandList" :src="item" alt="" /></div>
        </div>
        <div class="line">
          <span style="flex-shrink: 0">经营品类(客户细类)：</span>
          <a-space>
            <a-tag v-for="item in detail.customerCategory" :key="item">{{ item }}</a-tag>
          </a-space>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { IconSearch, IconRefresh } from "@arco-design/web-vue/es/icon";
import { useRouter, useRoute } from "vue-router";
import Breadcrumb from "@/components/Breadcrumb/index.vue";
import { getVendorList, getAreaList, enableVendor, disableVendor, getVendorDetail } from "@/apis/business";
import { onMounted } from "vue";
import type { GetList, VendorItem } from "@/apis/business/type";
import { Message } from "@arco-design/web-vue";
import CustomTitle from "@/components/CustomTitle/index.vue";
const router = useRouter();
const route = useRoute();
const form = ref<GetList>({
  status: 1,
  providerType: undefined,
  areaId: "",
  makeType: undefined,
  endTime: "",
  startTime: "",
  orientation: "",
  categoryId: "",
  factoryName: route.query.name as string
});
const params = ref({
  size: 10,
  current: 1
});
const paramsRef = ref(null);
const tempTime = ref<string[]>([]);
const data = ref<VendorItem[]>([]);
const areaOption = ref<any[]>([]);
const total = ref<number>(0);
const visible = ref(false);
const detail = ref<any>({});

/**
 * 跳转到商家端选品中心
 */
const toPath = () => {
  const routeUrl = router.resolve({
    path: "/business/products/selection"
  });
  window.open(routeUrl.href, "_blank");
};
/**
 * 获取列表
 */
const getList = async () => {
  if (tempTime.value) {
    form.value.startTime = tempTime.value[0];
    form.value.endTime = tempTime.value[1];
  }
  const res = await getVendorList(params.value, form.value);
  data.value = res.data.list;
  total.value = res.data.total;
};
/**
 * 编辑状态
 * @param item 列表项
 */
const editStatus = async (item: VendorItem) => {
  if (item.status) {
    await enableVendor(item.factoryId);
    getList();
    Message.success("操作成功");
  } else {
    await disableVendor(item.factoryId);
    getList();
    Message.success("操作成功");
  }
};

/**
 * 获取行政区划
 */
const getArea = async () => {
  const res = await getAreaList();
  areaOption.value = res.data;
};
/**
 * 查看
 */
const view = async (factoryId: string) => {
  const res = await getVendorDetail(factoryId);
  detail.value = res.data;
  visible.value = true;
};
/**
 * 重置表单
 */
const reset = () => {
  (paramsRef as any).value.resetFields();
  if (form.value.status == 0) tempTime.value = [];
  getList();
};
onMounted(() => {
  getList();
  getArea();
});
</script>

<style scoped lang="scss">
.vmi-container {
  height: calc(100vh - 134px);
  box-sizing: border-box;
  background: white;
  padding-bottom: 20px;
  border-radius: 10px;
  overflow-y: scroll;

  .search-wrap {
    background-color: #f6f8fa;
    padding: 20px;
  }

  .btn-wrap {
    display: flex;
    justify-content: flex-end;
  }

  .pagination {
    margin: 20px 0;
    display: flex;
    justify-content: end;
  }

  .operate-btn {
    display: flex;
    justify-content: space-between;
  }
}

.list {
  .line {
    min-height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;

    > span:nth-child(1) {
      color: #909399;
    }

    .img-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    img {
      height: 24px;
    }
  }
}

.sticky {
  position: sticky;
  top: -20px;
  background: white;
  z-index: 99;
  padding-bottom: 20px;
}

::v-deep(thead .arco-table-th) {
  background: #f2f6fc;
}

::v-deep(tbody) {
  .arco-table-tr:nth-child(even) {
    .arco-table-td {
      background-color: #f2f6fc !important;
    }
  }
}
</style>
